<template>
  <view class="content">
    <!-- markertap标记物点击事件，callouttap气泡点击事件，regionchange视野发生变化时的事件 -->
    <map id="map" class="map" show-location :latitude="lat ? lat : latitude" :longitude="lon ? lon : longitude"
      :markers="fillMaster" @markertap="markertap" @regionchange="regionchange" style="width: 100%; height: 85vh"></map>
    <view class="fillimage" @click="locationNew()" style="bottom: 34vh;">
      <image :src="moves ? fillImgN : fillImgNs"></image>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { fillingList } from '@/gql/filling';
  import { toPublish } from '@mqtt';
  import type { Ref } from 'vue';
  import { onMounted, ref } from 'vue';
  /**
   * 地图组件
   * @property {String} img1 固定加注图标
   * @property {String} icon1 移动加注图标
   * @property {String} fillImgN 非当前位置图标
   * @property {String} fillImgNs 返回当前位置图标
   * @property {Array} markers 加注机列表
   * @property {Array} markers_F 兴趣点列表
   * @property {Array} fillMaster 兴趣点图标列表
   * @property {Boolean} moves 是否移动地图
   * @property {Boolean} ios 是否是苹果系统
   * @property {Null} map 定义地图信息
   * @property {Boolean} first 是否返回当前位置
   * @property {Number} longitude 当前位置的经度
   * @property {Number} latitude 当前位置的纬度
   * @property {Number} lon 移动的位置的经度
   * @property {Number} lat 移动的当前位置的纬度
   * @property {Null} _mapContext 定义地图信息
   */
  //view
  const img1 = ref('../../static/filling/fillins.png'); //固定加注
  const icon1 = ref('../../static/filling/lot.png'); //移动加注

  const fillImgN = ref('../../static/filling/icon3.png'); //非当前位置
  const fillImgNs = ref('../../static/filling/icon.png'); //返回当前位置

  const markers : Ref<any[]> = ref([]);
  const markers_F : Ref<any[]> = ref([]);

  const fillMaster = ref([]);
  const moves = ref(false);
  const ios = ref(0);
  const map = ref(null);

  const _mapContext = ref(null)
  const lat = ref()
  const lon = ref()

  let weach = ref(1);

  const first = ref(false)

  const props = defineProps({
    longitude: { type: Number },
    latitude: { type: Number },
  });

  onMounted(() => {
    _mapContext.value = uni.createMapContext('map');
    // TODO check
    // @ts-ignore
    // 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
    _mapContext.value.initMarkerCluster({
      enableDefaultStyle: false,
      zoomOnClick: true,
      gridSize: 30,
      complete(res) {
        console.log('initMarkerCluster', res);
      },
    });
  });
  /**
   * 获取加注机列表
   *  @property {Number} lon 当前位置的经度
   * @property {Number} lat 当前位置的纬度
   */
  function fillLists(lon : number, lat : number) {
    weach.value = 0;
    const payload = {
      query: fillingList,
      variables: {
        longitude: lon,
        latitude: lat,
        type: '',
      },
    };
    toPublish('ql/driver/getmarkerList', payload, (obj : any) => {
      const { data } = obj;
      markers.value = data.fill_list;
      markers_F.value = data.fill_list;
      //初始化地图
      indexMap();
    });
  }
  /**
   * 小程序初始化地图
   */
  function indexMap() {
    fillMaster.value = [];
    addMarkers();
  }
  /**
   * 地图页面移动
   */
  function moveMap(lons : number, lats : number) {
    lat.value = Number(lats)
    lon.value = Number(lons)
  }
  /**
   * 小程序兴趣点
   */
  function addMarkers() {
    fillMaster.value = [];
    markers.value.forEach(function (marker) {
      const master = {
        id: marker.id,
        iconPath: marker.type === 'fixed' ? img1 : icon1,
        width: 40,
        height: 40,
        joinCluster: true, // 指定了该参数才会参与聚合
        latitude: marker.latitude + '',
        longitude: marker.longitude + '',
      };
      fillMaster.value.push(master);
      if (!first.value && fillMaster.value.length == markers.value.length) {
        if (moves.value && !first.value) {
          lat.value = Number(props.latitude)
          lon.value = Number(props.longitude)
        } else {
          lat.value = Number(markers_F.value[0].latitude)
          lon.value = Number(markers_F.value[0].longitude)
        }
        first.value = true
        moves.value = true;
        moveMap(lon.value, lat.value)
      }
    });
  }

  const emit = defineEmits(['locationNew', 'fillDs', 'curens']);
  /**
   * 返回当前位置
   */
  function locationNew() {
    if (moves.value) {
      ios.value = 0;
      moves.value = false;
      first.value = false
      // lat.value=Number(props.latitude)
      // lon.value=Number(props.longitude)
      uni.removeStorageSync('location');
      emit('locationNew');
    }
  }
  /**
   * 点击兴趣点
   * @property {Object} e 点击兴趣点信息
   */
  function markertap(e : any) {
    emit('fillDs');
    fillMaster.value.map((item, index) => {
      if (item.id === e.detail.markerId) {
        item.width = 55;
        item.height = 55;
        emit('curens', index);
      } else {
        item.width = 40;
        item.height = 40;
      }
    });
  }
  /**
   * 3D	轮播
   */
  function changeActive(ind) {
    fillMaster.value.map((item, index) => {
      if (index === ind) {
        lat.value = Number(item.latitude)
        lon.value = Number(item.longitude)
        item.width = 55;
        item.height = 55;
        emit('curens', index);
      } else {
        item.width = 40;
        item.height = 40;
      }
    });
  }
  /**
   * 地图移动事件
   */
  function regionchange(e) {
    const move = e.detail;
    switch (move.type) {
      case 'end':
        weach.value++;
        const onece_1 = Number.parseFloat((move.centerLocation.latitude - props.latitude).toFixed(4));
        const onece_2 = Number.parseFloat((move.centerLocation.longitude - props.longitude).toFixed(4));
        if (onece_1 !== 0 || onece_2 !== 0) {
          moves.value = weach.value > 0;
        }
        break;
      case 'begin':
        break;
    }
  }
  defineExpose({
    fillLists,
    changeActive,
    moves,
    first,
    moveMap,
    lon,
    lat
  });
</script>

<style scoped lang="less">
  .fillimage {
    width: 90rpx;
    height: 90rpx;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    left: 30rpx;
    z-index: 5;
    bottom: 300rpx;
    background-color: white;

    image {
      width: 46rpx;
      height: 46rpx;
    }
  }
</style>